<template>
  <div id="fridaymap">
    <Top></Top>
    <Nav></Nav>
    <Navh></Navh>
    <div class="friday">
      <div class="fridaynav">
        <div class="frist">您当前得位置:首页></div>
        <div class="two">礼拜五商城></div>
        <span class="thress">新用户注册</span>
      </div>
      <div class="fridayleft">
        <p class="fridayshop">礼拜五商城</p>
        <div class="heard">
          <p @click="setshow">关于礼拜五 ></p>
          <ul v-if="show" >
            <li>
              <router-link to="/friday/fridayContent">新用户注册</router-link>
            </li>
            <li>
              <router-link to="1">在线下单</router-link>
            </li>
            <li>
              <router-link to="1">支付方式</router-link>
            </li>
          </ul>
        </div>
        <div class="heard">
          <p @click="setshow1">配送说明 ></p>
          <ul  v-if="show1">
            <li>
              <router-link to="1">运费说明</router-link>
            </li>
            <li>
              <router-link to="1">配送方式</router-link>
            </li>
            <li>
              <router-link to="1">发票说明</router-link>
            </li>
          </ul>
        </div>
        <div class="heard">
          <p @click="setshow2">售后服务 ></p>
          <ul  v-if="show2">
            <li>
              <router-link to="1">退换货原则</router-link>
            </li>
            <li>
              <router-link to="1">服务保障承诺</router-link>
            </li>
            <li>
              <router-link to="1">验货与签收</router-link>
            </li>
            <li>
              <router-link to="1">发票说明</router-link>
            </li>
          </ul>
        </div>
        <div class="heard">
          <p @click="setshow3">加盟礼拜五 ></p>
          <ul  v-if="show3">
            <li>
              <router-link to="1">加盟条款</router-link>
            </li>
            <li>
              <router-link to="1">公司简介</router-link>
            </li>
            <li>
              <router-link to="1">服务协议</router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="fridayright">
          <router-view></router-view>
      </div>
    </div>
    <Ping></Ping>
  </div>
</template>
<script>
import Top from "@/components/top.vue";
import Ping from "@/components/pingpai.vue";
import Navh from "@/components/BX-nav.vue";
import Nav from "@/components/BX-indexHeard.vue";
export default {
  components: {
    Top,
    Ping,
    Nav,
    Navh
  },
  data(){
      return{
          show:true,
           show1:true,
            show2:true,
             show3:true,
      }
  },
  methods: {
      setshow(){
          this.show=!this.show
      },
      setshow1(){
          this.show1=!this.show1
      },
      setshow2(){
          this.show2=!this.show2
      },
      setshow3(){
          this.show3=!this.show3
      }
  },
};
</script>
<style  scoped>
#fridaymap {
  width: 100%;
}
.friday {
  width: 80%;
  margin: auto;
 
}
.fridaynav {
  width: 100%;
  height: 40px;
  margin: 15px auto;
  background: #f4f4f4;
  font-size: 16px;
  color: #666;
  overflow: hidden;
}
.frist {
  margin-left: 15px;
}
.frist,
.two,
.thress {
  float: left;
  line-height: 40px;
}
.fridayleft{
    width:15%;
    float:left;
    border:1px solid #e7e7e7;
    text-align: left;
    overflow: hidden;
}
.fridayleft ul{
    list-style: none;
    padding: 0px;
    margin:0px;
}
.fridayleft ul li a{
    text-decoration: none;
    color:#a9a9a9;
}
.fridayshop{
    width: 100%;
    height:50px;
    margin:0px;
    font-size: 19px;
    line-height: 50px;
    padding-left:20px;
    border-bottom:1px solid #a9a9a9;
}
.heard{
    padding-left:20px;
    padding-right:20px;
    line-height: 30px;
}
.heard p{
    margin:0px;
    font-size: 17px;
    color:#666666;
    cursor: pointer;
}
.fridayright{
    width:80%;
    border:1px solid #e7e7e7;
    float: right;
     margin-bottom: 20px;
}
</style>  